<template>
  <div id="order-page" v-loading="myLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       :style="{
    minHeight:(this.getWinSize().height-37-this.getSafeArea().top)+'px',
  }">
    <div class="page-title" style="position: fixed; width: 100%; z-index: 9" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.back()">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>商品日志-列表</span>
    </div>


    <i-scroller-box
      class="order-list"
      ref="i-scroller-box"
      url="Product/getLogList"
      style="position: relative;"
      :height="getWinSize().height-70-this.getSafeArea().top"
      :style="{
        paddingTop:(this.getSafeArea().top+40)+'px',
       width:'100%'
      }">

      <template v-slot:list-item="{index,data}">
        <product-log-list-item :curr-product-log="data"/>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import OrderActButton from '../common/OrderActButton'
import IScrollerBox from '../common/IScrollerBox'
import ProductModelListItem from '../common/ProductModelListItem'
import ProductModelLogListItem from '../common/ProductModelLogListItem'
import ProductLogListItem from '../common/ProductLogListItem'

export default {
  name: 'ProductLogList',
  components: {ProductLogListItem, ProductModelLogListItem, ProductModelListItem, IScrollerBox, OrderActButton},
  data: function () {
    return {
      currStatus: '',
      orderList: [],
      myLoading: false,
    }
  },
  mounted () {

    this.getList()

    let $this = this
    window.onscroll = function () {
      let scrollPos = $this.getScrollTop()
      let maxHeight = $this.getScrollHeight() - $this.getWinSize().height
      if (scrollPos === 0) {
        // 到达顶部
        // $this.getOrderList()
      }
      // 到达底部
      if (maxHeight - scrollPos <= 0) {
        console.log('到达底部')
        $this.getList()
      }
    }
  },
  destroyed () {
    window.onscroll = null
  },
  methods: {
    getList: function () {
      var form = {}
      if (this.$route.query.shopProductStockId > 0) {
        form.shopProductStockId = this.$route.query.shopProductStockId
      }
      if (this.$route.query.shopProductId > 0) {
        form.shopProductId = this.$route.query.shopProductId
      }
      this.$refs['i-scroller-box'].getList({
        page: 1,
        form: form
      })
    },
  }
}
</script>

<style scoped>

</style>
